<template>
  <div style="display: flex">
    <!-- <div class="custom-div"> -->
    <div
      v-if="conditionDTO.length > 1"
      @click="!relation"
      style="cursor: pointer"
      class="custom-div displayFlex"
    >
      <div class="child-div">
        {{ relation ? "且" : "或" }}
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sanjiao"></use>
        </svg>
      </div>
    </div>
    <div>
      <div
        :style="{
          marginBottom: index2 === conditionDTO.length - 1 ? '0px' : '10px',
        }"
        style="margin-bottom: 10px; display: flex"
        :gutter="55"
        v-for="(ros, index2) in conditionDTO"
        :key="index2"
      >
        <div>
          <a-form-item
            :style="{ width: ['data'].includes(checkRule) ? '330px' : '420px' }"
            style="width: 205px; margin-right: 10px"
          >
            <a-select
              v-model="ros.columnKey"
              multiple
              v-if="checkRule === 'timeRange'"
              style="width: 100%"
            >
              <a-option
                v-for="item in dataIndexList.filter((item) =>
                  ['datePicker', 'timePicker'].includes(item.type)
                )"
                :key="item.dataIndex"
                :value="item.dataIndex"
              >
                <div v-if="item.type === 'datePicker'">{{ item.name }}</div>
                <div v-if="item.type === 'timePicker'">{{ item.name }}</div>
              </a-option>
            </a-select>
            <a-select
              @change="columnKeyChange(ros)"
              v-else
              v-model="ros.columnKey"
              multiple
              style="width: 100%"
            >
              <a-option
                v-for="item in dataIndexList"
                :key="item.dataIndex"
                :value="item.dataIndex"
              >
                {{ item.name }}
              </a-option>
            </a-select>
          </a-form-item>
        </div>
        <div class="displayFlex" v-if="['data'].includes(checkRule)">
          <a-button
            style="width: 180px; margin-right: 10px"
            @click="
              ((dataPopVisible = true),
              (currentIndex = index2),
              (formData = ros.formData ? ros.formData : { ruleInfo: [] }))
            "
            :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
            >数据源</a-button
          >
        </div>
        <div v-if="!['eMail', 'regular'].includes(checkRule)">
          <a-form-item style="width: 120px; margin-right: 10px">
            <!-- v-model="ros.match" -->
            <a-select
              v-if="checkRule === 'repeat'"
              @change="matchChange(ros)"
              style="width: 100%"
              v-model="ros.match"
              :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
            >
              <a-option
                v-for="(value, key) in isrepeat"
                :key="key"
                :value="value"
                >{{ key }}</a-option
              >
            </a-select>
            <a-select
              v-else-if="['data'].includes(checkRule)"
              @change="matchChange(ros)"
              style="width: 100%"
              v-model="ros.match"
              :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
            >
              <a-option value="eq">等于</a-option>
              <a-option value="ne">不等于</a-option>
            </a-select>
            <a-select
              v-else
              style="width: 100%"
              @change="matchChange(ros)"
              v-model="ros.match"
              :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
            >
              <a-option
                v-for="(value, key) in checkRule !== 'result'
                  ? Object.fromEntries(
                      Object.entries(conditionEnum).filter(
                        ([key]) => !['在...之中', '不在...之中'].includes(key)
                      )
                    )
                  : Object.fromEntries(
                      Object.entries(conditionEnum).filter(
                        ([key]) => !['在...之间', '不在...之间'].includes(key)
                      )
                    )"
                :key="key"
                :value="value"
                >{{ key }}</a-option
              >
            </a-select>
          </a-form-item>
        </div>
        <div class="displayFlex" v-if="checkRule === 'el'">
          <a-button
            style="width: 332px; margin-right: 10px"
            @click="
              ((formulaVisible = true),
              (currentIndex = index2),
              (formula = ros.formula ? ros.formula : []))
            "
            :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
            >点击设置公式</a-button
          >
        </div>
        <div class="displayFlex" v-else-if="['data'].includes(checkRule)">
          <!-- mode="tags" -->
          <a-select
            v-if="ros.formData"
            placeholder="请选择"
            v-model="ros.formData.ruleInfo"
            style="width: 332px"
          >
            <a-option v-for="item in dataShowFieldOptions" :key="item.columnAs">
              {{ item.columnAs }}
            </a-option>
          </a-select>
        </div>
        <!-- 'eq','ne' 放开 > < >= <=-->
        <div
          class="displayFlex"
          v-else-if="['eq', 'ne', 'lt', 'gt', 'lte', 'gte'].includes(ros.match)"
        >
          <a-form-item style="width: 332px">
            <a-input-group compact>
              <a-select
                :style="{
                  marginTop:
                    checkRule === 'timeRange' && ros.spaceType !== 'select'
                      ? '4px'
                      : '',
                }"
                style="width: 25%"
                v-model="ros.spaceType"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              >
                <a-option value="select"> 字段 </a-option>
                <a-option value="input"> 固定值 </a-option>
              </a-select>
              <a-form-item
                style="width: 75%"
                v-if="
                  (ros.spaceType === 'input' || !ros.spaceType) &&
                  checkRule === 'timeRange' &&
                  dataIndexList.filter(
                    (item) => item.dataIndex === ros.columnKey?.[0]
                  )?.[0]?.type === 'datePicker'
                "
              >
                <a-date-picker v-model="ros.ruleInfo" :format="dateFormat" />
              </a-form-item>
              <a-form-item
                style="width: 75%"
                v-else-if="
                  (ros.spaceType === 'input' || !ros.spaceType) &&
                  checkRule === 'timeRange' &&
                  dataIndexList.filter(
                    (item) => item.dataIndex === ros.columnKey?.[0]
                  )?.[0]?.type === 'timePicker'
                "
              >
                <a-time-picker style="width: 100%" v-model="ros.ruleInfo" />
              </a-form-item>
              <a-input
                v-else-if="ros.spaceType === 'input' || !ros.spaceType"
                v-model="ros.ruleInfo"
                style="width: 75%"
                placeholder="请输入"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              />

              <a-select
                v-if="ros.spaceType === 'select'"
                v-model="ros.ruleInfo"
                style="width: 75%"
                :disabled="ros.columnKey && ros.columnKey.length !== 1"
              >
                <a-option
                  v-for="item in dataIndexList"
                  :key="item.dataIndex"
                  :value="item.dataIndex"
                  :disabled="ros.columnKey.includes(item.dataIndex)"
                >
                  {{ item.name }}
                </a-option>
              </a-select>
            </a-input-group>
          </a-form-item>
        </div>
        <div class="displayFlex" v-else-if="['in', 'nin'].includes(ros.match)">
          <a-form-item style="width: 332px">
            <a-input-group
              v-if="
                checkRule === 'timeRange' &&
                pageNameList.filter(
                  (item) => item.dataIndex === ros.columnKey?.[0]
                )?.[0]?.type === 'datePicker'
              "
              compact
            >
              <a-form-item
                style="width: 45%; text-align: center"
                placeholder="Minimum"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              >
                <a-date-picker v-model="ros.Minimum" :format="dateFormat" />
              </a-form-item>
              <a-input
                style="
                  width: 30px;
                  margin-top: 4px;
                  pointer-events: none;
                  background-color: #fff;
                "
                placeholder="~"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              />
              <a-form-item
                style="width: 45%; text-align: center"
                placeholder="Maximum"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              >
                <a-date-picker v-model="ros.Maximum" :format="dateFormat" />
              </a-form-item>
            </a-input-group>

            <a-input-group
              v-else-if="
                checkRule === 'timeRange' &&
                pageNameList.filter(
                  (item) => item.dataIndex === ros.columnKey?.[0]
                )?.[0]?.type === 'timePicker'
              "
              compact
            >
              <a-form-item
                style="width: 45%; text-align: center"
                placeholder="Minimum"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              >
                <a-time-picker style="width: 100%" v-model="ros.Minimum" />
              </a-form-item>
              <a-input
                style="
                  width: 30px;
                  margin-top: 4px;
                  pointer-events: none;
                  background-color: #fff;
                "
                placeholder="~"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              />
              <a-form-item
                style="width: 45%; text-align: center"
                placeholder="Maximum"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              >
                <a-time-picker style="width: 100%" v-model="ros.Maximum" />
              </a-form-item>
            </a-input-group>

            <a-input-group v-else compact>
              <a-input
                style="width: 45%; text-align: center"
                placeholder="Minimum"
                v-model="ros.Minimum"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              />
              <a-input
                style="
                  width: 30px;
                  pointer-events: none;
                  background-color: #fff;
                "
                placeholder="~"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              />
              <a-input
                style="width: 45%; text-align: center"
                placeholder="Maximum"
                v-model="ros.Maximum"
                :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
              />
            </a-input-group>
          </a-form-item>
        </div>
        <div
          v-else-if="
            checkRule === 'eMail' ||
            checkRule === 'repeat' ||
            ['notNull', 'null'].includes(ros.match)
          "
        ></div>
        <div v-else-if="checkRule !== 'eMail'">
          <a-form-item
            style="width: 332px"
            v-if="
              checkRule === 'timeRange' &&
              pageNameList.filter(
                (item) => item.dataIndex === ros.columnKey?.[0]
              )?.[0]?.type === 'datePicker'
            "
          >
            <a-date-picker v-model="ros.ruleInfo" :format="dateFormat" />
          </a-form-item>
          <a-form-item
            style="width: 332px"
            v-else-if="
              checkRule === 'timeRange' &&
              pageNameList.filter(
                (item) => item.dataIndex === ros.columnKey?.[0]
              )?.[0]?.type === 'timePicker'
            "
          >
            <a-time-picker style="width: 100%" v-model="ros.ruleInfo" />
          </a-form-item>
          <a-form-item v-else style="width: 332px">
            <a-input
              placeholder="请输入"
              v-model="ros.ruleInfo"
              :disabled="!(ros.columnKey && ros.columnKey.length > 0)"
            />
          </a-form-item>
        </div>
        <div
          v-if="!isLinkage"
          style="
            width: 35px;
            margin-left: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <a-button
            type="text"
            @click="
              () => {
                conditionDTO.length === 1
                  ? form.infoCheckAddDTOList.splice(index2, 1)
                  : conditionDTO.splice(index2, 1);
              }
            "
            class="delIcon"
            >删</a-button
          >
          <a-button
            type="text"
            @click="
              () => {
                conditionDTO.push({});
              }
            "
            class="addIcon"
            >加</a-button
          >
        </div>
      </div>
    </div>
    <a-modal
      :width="732"
      :title="null"
      v-model:visible="dataPopVisible"
      :closable="false"
      :footer="false"
      class="success-modal"
    >
      <dataPop
        v-if="dataPopVisible"
        ref="dataPop"
        @ok="dataPopOk"
        @cancel="dataPopCancel"
        :formData="formData"
      />
    </a-modal>
    <!-- 183 -->

    <a-modal
      :width="872"
      :title="null"
      v-model:visible="formulaVisible"
      :closable="false"
      :footer="false"
      class="success-modal"
    >
      <formula
        v-if="formulaVisible"
        ref="formula"
        @ok="formulaOk"
        @cancel="cancel"
        :formula="formula"
        :variableList="variableList"
      />
    </a-modal>

    <!-- 数据源弹窗 -->
  </div>
</template>

<script>
import dataPop from "@/components/Form/verification/dataPop.vue";
import formula from "@/components/Form/verification/formula.vue";
import moment from "moment";

export default {
  name: "FromCondition",
  components: {
    dataPop,
    formula,
  },
  inject: ["dataObj"],
  props: {
    conditionDTO: {
      type: Array,
      default: () => [],
    },
    checkRule: {
      type: String,
      default: () => "",
    },
    isLinkage: {
      // 是否为联动条件
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dateFormat: "YYYY/MM/DD",
      relation: true, // 条件组关系 true为且false为或
      formulaVisible: false,
      // visible: true,
      dataPopVisible: false,
      formula: [],
      currentIndex: undefined,
      switchStatus: true,
      dataIndexList: [],
      pageNameList: [],
      variableList: [], // 计算公式的变量
      dataShowFieldOptions: [], // 出参选项
      // ruleInfo: [], // 选中的出参
      formData: {
        ruleInfo: [],
      },
      form: {
        infoCheckAddDTOList: [],
      },
      typeOption: {
        输入框: "input",
        下拉框: "select",
        单选框: "radio",
        上传: "upload",
        日期选择器: "datePicker",
        多行文本框: "textarea",
        数字输入框: "inputNumber",
        多选框: "checkbox",
        时间选择器: "timePicker",
        键值对输入: "keyValueInput",
        富文本框: "editor",
        树状控件: "tree",
        计算公式: "countFormula",
      },
      // result
      conditionEnum: {
        等于: "eq",
        小于: "lt",
        大于: "gt",
        小于等于: "lte",
        大于等于: "gte",
        "在...之中": "in",
        "不在...之中": "nin",
        // '在...之间': 'between',
        "在...之间": "in",
        "不在...之间": "nin",
        不等于: "ne",
        // '正则': 'regex',
        // '大小': 'size',
        // '所有都满足': 'all',
        // '存在': 'exists',
        // '字段类型': 'type',
        // '没有值': 'null',
        // '有值': 'notNull',
        模糊匹配: "like",
      },
      isrepeat: {
        重复: "repeat",
        // '不重复': 'notRepeated'
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
  },
  mounted() {
    this.pageNameList = this.dataObj.pageData
      .filter((item) => item.formData.dataIndex && item.formData.name)
      .map((item) => {
        return item.formData;
      });

    this.dataIndexList = [];
    this.dataObj.pageData
      .filter((item) => item.formData.dataIndex && item.formData.name)
      .map((item) => {
        this.dataIndexList.push({
          name: item.formData.name,
          dataIndex: item.formData.dataIndex,
          type: item.type,
        });
        if (item.type === "table") {
          item.formData.columns.map((ros) => {
            this.dataIndexList.push({
              name: `${item.formData.name}.${ros.title}`,
              dataIndex: `${item.formData.dataIndex}.${ros.dataIndex}`,
              type: ros.type,
            });
            if (ros.isStatistics) {
              // eslint-disable-next-line no-undef
              const totalLabel = ros.totalName
                ? ros.totalName
                : `总${ros.title}`;
              this.dataIndexList.push({
                name: `${item.formData.name}.${totalLabel}`,
                dataIndex: `${item.formData.dataIndex}.${totalLabel}`,
                type: ros.type,
              });
            }
          });
        }
      });

    this.variableList = this.dataObj.pageData
      .filter((item) => item.formData.dataIndex && item.formData.name)
      .map((item) => {
        return {
          key: item.formData.name,
          value: item.formData.dataIndex,
          dataType: item.formData.dataType,
          type: "variable",
        };
      });
  },
  methods: {
    moment,
    columnKeyChange(ros) {
      // columnKey不为时间类型时点击
      if (this.checkRule === "repeat") {
        ros.match = "repeat";
      }
    },
    matchChange(ros) {
      // 选择match时事件
      if (["eq", "ne"].includes(ros.match)) {
        this.$set(ros, "spaceType", "input");
      }
    },
    formulaOk(data) {
      this.conditionDTO[this.currentIndex]["formula"] = data;
      this.formulaVisible = false;
    },
    cancel(data) {
      this.formulaVisible = false;
    },
    dataPopOk(data) {
      // 数据源确认回调
      const { dataShowFieldOptions } = data;
      this.dataShowFieldOptions = dataShowFieldOptions;
      this.conditionDTO[this.currentIndex]["formData"] = this.formData;
      console.log(
        this.conditionDTO[this.currentIndex],
        "this.conditionDTO[this.currentIndex]"
      );
      this.dataPopVisible = false;
    },
    dataPopCancel(data) {
      this.dataPopVisible = false;
    },
    // onDragEnd (evt) {
    //   console.log('拖拽结束', evt)
    // },
  },
  // watch: {
  //   form: {
  //     handler (value) {
  //       this.$set(this.dataObj.tableDesc, 'infoCheckAddDTOList', value.infoCheckAddDTOList)
  //     },
  //     deep: true
  //   }
  // }
};
</script>

<style lang="less" scoped>
.custom-div {
  border-left: 1px solid #bfbfbf; /* 左侧边框 */
  border-top: 1px solid #bfbfbf; /* 上侧边框 */
  border-bottom: 1px solid #bfbfbf; /* 下侧边框 */
  border-top-left-radius: 15px; /* 左上角圆角 */
  border-bottom-left-radius: 15px; /* 左下角圆角 */
  width: 30px;
  margin: 16px 0px 20px 16px;
  position: relative; /* 设置父元素为相对定位，使子元素可以绝对定位 */
}

.child-div {
  // width:25px;
  height: 25px;
  line-height: 13px;
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: -13px; /* 左边线 */
  transform: translateY(-50%); /* 垂直居中调整 */
  padding: 5px; /* 子元素内边距 */
  background-color: #ffffff; /* 子元素背景色 */
  border: 1px solid #bfbfbf;
  border-radius: 7px;
  font-weight: 500;
  // cursor: pointer;
}

.displayFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.addButton {
  width: 70px;
  height: 30px;
  cursor: pointer;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #2983ff;
  display: flex;
  align-content: center;
  justify-content: space-evenly;
}

.conditionList {
  display: flex;
  align-content: center;
  // justify-content: space-evenly;
  width: 100%;
  flex-wrap: wrap;
  height: 30px;
  padding: 0px 77px;
  background: #f7f8fa;
  border-radius: 6px;
}

.conditionGroup {
  // background: #FAFBFD;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  font-weight: 400;
}

/deep/ .custom-select .arco-select-view {
  border-radius: 16px !important; /* 设置圆角半径 */
  background: #f1f7ff !important;
  border: 1px solid #d8e8fd !important;
}

/deep/ .custom-select .arco-select-view:hover {
  background: #ffffff !important;
}

.custom-div {
  border-left: 1px solid #bfbfbf; /* 左侧边框 */
  border-top: 1px solid #bfbfbf; /* 上侧边框 */
  border-bottom: 1px solid #bfbfbf; /* 下侧边框 */
  border-top-left-radius: 15px; /* 左上角圆角 */
  border-bottom-left-radius: 15px; /* 左下角圆角 */
  // width:30px;
  margin: 20px 0px 20px 16px;
  position: relative; /* 设置父元素为相对定位，使子元素可以绝对定位 */
}

.child-div {
  // width:25px;
  height: 25px;
  line-height: 13px;
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: -22px; /* 左边线 */
  transform: translateY(-50%); /* 垂直居中调整 */
  padding: 5px; /* 子元素内边距 */
  background-color: #ffffff; /* 子元素背景色 */
  border: 1px solid #bfbfbf;
  border-radius: 7px;
  font-weight: 500;
  // cursor: pointer;
}

.drag-handle {
  display: flex;
  align-content: left;
  align-items: center;
  margin-right: 4px;
}

.icon {
  font-size: 12px;
  color: #646a73;
  cursor: pointer;
}

.icon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.delIcon {
  line-height: 34px;
  cursor: pointer;
  color: #97999c;
  font-size: 12px;
}

.delIcon:hover {
  color: red; /* 悬停后的颜色 */
}

.addIcon {
  line-height: 33px;
  cursor: pointer;
  color: #97999c;
  font-size: 12px;
}

.addIcon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.switch {
  display: flex;
  width: 88px;
  border-radius: 16px;
  background: #f0f2f5;
  cursor: pointer;
}

.switchLeft {
  width: 44px;
  height: 26px;
  border-radius: 16px;
  background: #ffffff;
  margin: 2px 0px 2px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switchRight {
  width: 44px;
  height: 26px;
  border-radius: 16px;
  margin: 2px 2px 2px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/ .arco-drawer {
  border-radius: 16px 16px 0px 0px;
}

/deep/ .arco-drawer-body {
  padding: 0px;
}

.displayFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/ .arco-form-item {
  margin-bottom: 0px;
}

/deep/ .arco-modal {
  border-radius: 16px;
}

/deep/ .arco-modal-body {
  padding: 9px 24px;
}
</style>
